<template>
  <div class="activityTwo">
    <div class="itemlistBox">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <div class="itemBox" v-for="(item ,index) in itemList" :key="index">
            <div class="userImgbox">
              <div class="userImg">
                <img src="../../assets/image/userImg.jpg">
              </div>
              <div style="margin-left: 15px">{{ item.nickName }}</div>
            </div>
            <div class="activityBox">
              <van-swipe :autoplay="300000" class="list_swipe">
                <van-swipe-item v-for="(itemimg, index) in item.photoUrls" :key="index">
                  <img @click="viewImages(item.photoUrls,index)" style="object-fit: cover" :src="itemimg">
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="goodItem">

              <div v-if="item.like" style="display: flex;align-items: center">
                <img class="itemGood" src="../../assets/image/goodRed.png" alt=""
                     @click="itemGood(item.id,item.like)">
                <span>{{ item.totalLikeCount }}次赞</span>
              </div>
              <div v-else style="display: flex;align-items: center">
                <img class="itemGood" src="../../assets/image/goodNull.png" alt=""
                     @click="itemGood(item.id,item.like)"><span>{{ item.totalLikeCount }}点赞</span>
              </div>
              <div class="deleteItem" @click="deleteItem(item.id)" v-show="currentUserName===item.createBy">
                <img class="itemGood" src="../../assets/image/deleteItem.png">
              </div>
            </div>
            <div class="userComment">
              {{ item.content }}
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="pushListBox">
      <div class="pushList" @click="pushList">
        +
      </div>
    </div>
    <!--删除操作框-->
    <van-dialog class="prizeResultModal" v-model="deleteSuccdShow" style="background-color: transparent">
      <img style="width: 100%" src="@/assets/image/deleteBg.png">
      <div class="operationFoot">
        <img src="../../assets/image/noDelete.png" alt="" @click="noDelete">
        <img src="../../assets/image/yesDelete.png" alt="" @click="yesDelete">

      </div>
    </van-dialog>
  </div>
</template>

<script>
import {getdeleteItemUrl, getGoodListUrl, getListUrl} from "@/api/list";
import {ImagePreview, Notify} from "vant";
import {myConstants} from "@/utils/activitytime";

export default {
  name: "indexTwo",
  data() {
    return {
      currentUserName: '',
      itemList: [],
      page: {
        pageSize: "10",
        pageNum: "1"
      },
      loading: false,
      deleteSuccdShow: false,
      finished: false,
      refreshing: false,
      isLoading: false

    };
  },
  mounted() {
    this.currentUserName = localStorage.getItem("username");
    this.$store.commit("changeaudioUrl", this.$route.query.type);
  },
  methods: {
    //删除
    deleteItem(id) {
      if (id) {
        this.deleteSuccdShow = true;
        this.deleteId = id;
      }

    },
    yesDelete() {
      let _this = this;
      let params = {
        id: this.deleteId
      };
      getdeleteItemUrl(params).then(res => {
        if (res.code === 200) {
          this.deleteSuccdShow = false;
          _this.deleteFromItemList(params.id);
          // this.getList();
        }
      });
    },
    noDelete() {
      this.deleteId = "";
      this.deleteSuccdShow = false;

    },
    onRefresh() {
      this.loading = true;
      this.page.pageNum = 1;
      this.pageSize = 10;
      this.getList(true);
    },
    getList(refresh) {
      let params = {
        ...this.page,
        type: this.$route.query.type
      };

      getListUrl(params).then(res => {
        let rows = res.data.list; //请求返回当页的列表
        this.loading = false;
        setTimeout(() => {
          this.refreshing = false;
        }, 1000);
        this.total = res.data.total;
        if (rows == null || rows.length === 0) {
          // 加载结束
          this.finished = true;
          return;
        }
        if (refresh) {
          this.itemList = [];
        }
        // 将新数据与老数据进行合并
        this.itemList = this.itemList.concat(rows);

        //如果列表数据条数>=总条数，不再触发滚动加载
        if (this.itemList.length >= this.total) {
          this.finished = true;
        }
      });
    },

    //滚动加载时触发，list组件定义的方法
    onLoad() {
      this.getList(false);
      this.page.pageNum++;

    },
    deleteFromItemList(id) {
      let list = this.itemList;
      let index = -1;
      if (list != null && list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (item.id === id) {
            index = i;
            list.splice(index, 1)
            break;
          }
        }
      }
    },
    pushList() {
      this.clickAudio();
      let _this = this;
      setTimeout(function () {
        _this.$router.push({path: "/activityFlowPushList", query: {type: "2"}});
      }, myConstants.delay)

    },
    itemGood(id, isGood) {
      this.clickAudio();

      if (isGood) {
        isGood = false;
      } else {
        isGood = true;
      }
      let params = {
        id: id,
        like: isGood,
        type: 2
      };
      getGoodListUrl(params).then(res => {
        if (res.code == 200) {
          for (let i = 0; i < this.itemList.length; i++) {
            if (this.itemList[i].id == id) {
              if (!isGood) {
                this.$set(this.itemList[i], "like", false);//改成数字类型就不用了加引号
                this.$set(this.itemList[i], "totalLikeCount", this.itemList[i].totalLikeCount - 1);
              } else {
                this.$set(this.itemList[i], "like", true);
                this.$set(this.itemList[i], "totalLikeCount", this.itemList[i].totalLikeCount + 1);
              }
            }
          }
          // Notify({ type: "success", message: res.message });
        }
      });
    },
    viewImages(urls, index) {
      this.clickAudio();
      setTimeout(function () {
        if (urls && urls.length) {
          ImagePreview({
            images: urls,
            startPosition: index
          });
        }
      }, myConstants.delay)
    }
  }
};
</script>

<style scoped lang="scss">
.activityTwo {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  //border: 1px solid red;

  .userImgbox {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 1.1875rem;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #181818;
    box-sizing: border-box;

    .userImg {
      width: 1.3125rem;
      height: 1.3125rem;
      background: #050505;
      opacity: 1;
      border-radius: 50%;

      img {
        height: 100%;
      }
    }
  }

  .activityBox {
    width: 100%;
    height: 500px;

    img {
      width: 100%;
      height: 100%;
    }


  }

  ::v-deep .my-swipe {
    height: 0;
  }

  ::v-deep .van-swipe {
    height: 100%;
  }

  .goodItem {
    width: 90%;
    margin: .8rem 1.1875rem 0;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #A3A1A1;
    display: flex;
    justify-content: space-between;

    .itemGood {
      vertical-align: middle;
      margin-right: 15px;
      width: 26px;
      height: 24px;
      opacity: 1;
    }
  }

  .userComment {
    width: 90%;
    margin: 10px 1.1875rem 0;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #181818;
  }

  .itemlistBox {
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: scroll;
  }

  .itemBox {
    //padding-bottom: 70px;
  }

  .pushListBox {
    z-index: 999;
    height: 60px;
    width: 100%;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    margin-top: 20px;

    .pushList {
      position: fixed;
      bottom: 30px;
      left: 50%;
      margin-left: -23px;
      width: 49px;
      height: 50px;
      background: linear-gradient(180deg, #FFFFFF 0%, #DEA2FC 100%);
      opacity: 1;
      border-radius: 50%;
      line-height: 50px;
      text-align: center;
      font-size: 50px;
      //font-weight: bold;
      //font-weight: 100;
    }
  }

  .prizeResultModal {
    //position: relative;
    .operationFoot {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
      width: 70%;

      display: flex;
      justify-content: space-between;
      margin: auto;

      img {
        display: block;
        height: 100%;
      }
    }
  }

}
</style>
